<template>
  <el-dialog
    class="subject-status-add-record"
    title="界面预览"
    width="1200px"
    :show-close="true"
    :visible.sync="formVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div>
      <el-form :rules="rules" ref="formRef" size="mini" :model="formData" label-width="200px">
        <div v-for="(fItem, fIndex) in previewVariableList" :key="fIndex">
          <!-- 单选 radio -->
          <template
            v-if="
              fItem.hide === '0' ||
                (fItem.hide === '' && fItem.embeddedSurface) ||
                (fItem.hide === '' && !fItem.variableType && fItem.variableName)
            "
          >
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-if="fItem.variableType === '10'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-radio-group
                style="width: 90%"
                v-if="fItem.variableValue.codeArrangement !== 3"
                v-model="formData[fItem.variable]"
              >
                <el-row :span="24" :gutter="20" style="width: 100%; display: flex; flex-wrap: wrap; align-content: flex-start;">
                  <el-col
                    :style="{ width: fItem.variableValue && fItem.variableValue.number ? (100 / fItem.variableValue.number) + '%' : '25%' }"
                    v-for="item in fItem.classify"
                    :key="item.codeValue"
                  >
                    <el-radio
                      :disabled="handleDisbaled(fItem)"
                      :label="item.codeValue"
                      :key="item.codeValue"
                      @click.native.prevent="handleRadioClick(item.codeValue, fItem.variable, fItem.readOnly === '0' || (fIndex > 0 && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable])))"
                    >
                      {{ item.codeDescribe }}
                    </el-radio>
                  </el-col>
                </el-row>
              </el-radio-group>
              <div v-else>
                <el-select
                  v-model="formData[fItem.variable]"
                  style="width: 90%"
                  :disabled="fIndex > 0 && handleDisbaled(fItem)
                  "
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in fItem.classify"
                    :key="item.codeValue"
                    :label="item.codeDescribe"
                    :value="item.codeValue"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>

            <!-- 多选 checkbox -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '20'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-checkbox-group
                style="width: 90%"
                v-if="fItem.variableValue.codeArrangement !== 3"
                v-model="formData[fItem.variable]"
              >
                <el-row :span="24" :gutter="20" style="width: 100%; display: flex; flex-wrap: wrap; align-content: flex-start;">
                  <el-col
                    :style="{ width: fItem.variableValue && fItem.variableValue.number ? (100 / fItem.variableValue.number) + '%' : '25%' }"
                    v-for="item in fItem.classify"
                    :key="item.codeValue"
                  >
                    <el-checkbox
                      @change="handleCheckboxChange"
                      :disabled="fIndex > 0 && handleDisbaled(fItem)"
                      :key="item.codeValue"
                      :label="item.codeValue"
                    >
                      <span>{{ item.codeDescribe }}</span>
                    </el-checkbox>
                  </el-col>
                </el-row>
              </el-checkbox-group>
              <div v-else>
                <el-select
                  v-model="formData[fItem.variable]"
                  style="width: 90%"
                  :disabled="fIndex > 0 && handleDisbaled(fItem)
                  "
                  placeholder="请选择"
                  clearable
                  multiple
                >
                  <el-option
                    v-for="item in fItem.classify"
                    :key="item.codeValue"
                    :label="item.codeDescribe"
                    :value="item.codeValue"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>

            <!-- 日期 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '30'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-date-picker
                v-if="fItem.variableValue.modifyEntryDate === 2"
                v-model="formData[fItem.variable]"
                :disabled="handleDisbaled(fItem)"
                type="date"
                clearable
                :value-format="fItem.entry"
                style="width: 90%"
                placeholder="选择日期"
              >
              </el-date-picker>
              <div v-else class="input-date">
                <el-input
                  style="width: 90%"
                  placeholder="请输入"
                  v-model="formData[fItem.variable]"
                  :disabled="handleDisbaled(fItem)"
                ></el-input>
                <el-date-picker
                  v-model="formData[fItem.variable + 'input']"
                  @change="value => handleDateTimeChange(value, fItem.variable)"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  style="width: 30px; padding-left: 2px"
                  type="date"
                >
                </el-date-picker>
              </div>
            </el-form-item>

            <!-- 时间 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '40'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-time-picker
                style="width: 90%"
                v-model="formData[fItem.variable]"
                placeholder="选择时间"
                :disabled="handleDisbaled(fItem)"
                :format="accuracyList[fItem.variableValue.accuracy]"
                :value-format="accuracyList[fItem.variableValue.accuracy]"
              >
              </el-time-picker>
            </el-form-item>
            <!-- 日期时间 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '50'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-date-picker
                style="width: 90%"
                v-model="formData[fItem.variable]"
                type="datetime"
                :disabled="handleDisbaled(fItem)"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>

            <!-- 数值 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '60'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-input
                v-model="formData[fItem.variable]"
                style="width: 90%"
                @input="(val) => onInput(val, fItem.variable)"
                @blur="(val) => onBlur(val, fItem.variable)"
                :disabled="handleDisbaled(fItem)"
              />
              <div
                :class="`${fItem.variable}-precision-box precision-box`"
                v-if="precision[fItem.variable]"
              >
                {{ precision[fItem.variable].join(" / ") }}
              </div>
              <!-- <el-input-number
                v-model="formData[fItem.variable]"
                style="width: 90%"
                :min="1"
                :precision="fItem.variableValue.form ? fItem.variableValue.form.split('.')[1] : 1"
                :max="fItem.variableValue.form ? numMaxType[fItem.variableValue.form.split('.')[0]] : 99999"
                :disabled="
                  fItem.readOnly === '0' ||
                    (!fItem.rowControl && fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                "
                clearable
              ></el-input-number> -->
            </el-form-item>

            <!-- 字符 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '70'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-input
                style="width: 90%"
                placeholder="请输入"
                v-model="formData[fItem.variable]"
                :disabled="handleDisbaled(fItem)"
              ></el-input>
            </el-form-item>

            <!-- 字符数值 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '80'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-input :disabled="handleDisbaled(fItem)" style="width: 90%" clearable placeholder="请输入" maxlength="200" show-word-limit v-model="formData[fItem.variable]">
              </el-input>
              <el-dropdown placement="bottom-start" trigger="click">
                <el-button :disabled="handleDisbaled(fItem)" icon="el-icon-more" style="margin-left: 8px"></el-button>
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item v-for="item in characterValueList" :key="item">
                    <span class="span-dropdown-item" @click="handleItemChecked(item.text, fItem.variable)">{{ item.text }}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>

            <!-- 日期 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '90'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-select
                v-model="formData[fItem.variable + 'value1']"
                :disabled="handleDisbaled(fItem)"
                placeholder="年"
                style="width: 20%"
                clearable
              >
                <el-option v-for="item in yearsList" :key="item" :label="item" :value="item"> </el-option>
              </el-select>
              &nbsp;
              <el-select
                v-model="formData[fItem.variable + 'value2']"
                :disabled="handleDisbaled(fItem)"
                placeholder="月"
                style="width: 20%"
                clearable
                v-if="fItem.variableValue.accuracy <= 2"
              >
                <el-option v-for="item in monthList" :key="item" :label="item" :value="item"> </el-option>
              </el-select>
              &nbsp;
              <el-select
                v-model="formData[fItem.variable + 'value3']"
                :disabled="handleDisbaled(fItem)"
                placeholder="日"
                style="width: 20%"
                clearable
                v-if="fItem.variableValue.accuracy <= 1"
              >
                <el-option v-for="item in dayList" :key="item" :label="item" :value="item"> </el-option>
              </el-select>
            </el-form-item>
            <!-- 字符时间 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '100'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-select
                v-model="formData[fItem.variable + 'value1']"
                :disabled="handleDisbaled(fItem)"
                placeholder="时"
                style="width: 20%"
                clearable
                v-if="fItem.variableValue.accuracy <= 3"
              >
                <el-option v-for="item in hoursList" :key="item" :label="item" :value="item"> </el-option>
              </el-select>
              &nbsp;
              <el-select
                v-model="formData[fItem.variable + 'value2']"
                :disabled="handleDisbaled(fItem)"
                placeholder="分"
                style="width: 20%"
                clearable
                v-if="fItem.variableValue.accuracy <= 2"
              >
                <el-option v-for="item in minAndSecondList" :key="item" :label="item" :value="item"> </el-option>
              </el-select>
              &nbsp;
              <el-select
                v-model="formData[fItem.variable + 'value3']"
                :disabled="handleDisbaled(fItem)"
                placeholder="秒"
                style="width: 20%"
                clearable
                v-if="fItem.variableValue.accuracy <= 1"
              >
                <el-option v-for="item in minAndSecondList" :key="item" :label="item" :value="item"> </el-option>
              </el-select>
            </el-form-item>
            <!-- 长字符 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '110'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-input
                style="width: 90%"
                type="textarea"
                :rows="4"
                placeholder="请输入"
                v-model="formData[fItem.variable]"
                :disabled="handleDisbaled(fItem)"
              ></el-input>
            </el-form-item>
            <!-- 图片上传 -->
            <el-form-item
              :label="`${fItem.variableName}${fItem.entry ? '(' + fItem.entry + ')' : ''}:`"
              v-else-if="fItem.variableType === '120'"
              :prop="fItem.required === '0' || fItem.regEx ? fItem.variable : ''"
            >
              <el-upload
                :disabled="handleDisbaled(fItem)"
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <!-- 内嵌表 -->
            <el-form-item :label="fItem.variableName" v-else-if="fItem.embeddedSurface">
              <div>
                <el-table
                  :data="fItem.tableData"
                  stripe
                  style="width: 98%"
                  size="mini"
                  row-key="id"
                  :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
                  :tree-props="{ children: 'children' }"
                >
                  <template v-for="(column, index) in fItem.headers">
                    <el-table-column width="260" v-if="column.name" :key="index" :label="column.name" align="center">
                      <template slot-scope="scope">
                        <div v-if="column.variableType === '10'">
                          <el-select
                            v-model="previewFormData[column.variable + scope.row.id]"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))
                            "
                            placeholder="请选择"
                            clearable
                          >
                            <el-option
                              v-for="item in column.classify"
                              :key="item.codeValue"
                              :label="item.codeDescribe"
                              :value="item.codeValue"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <div v-if="column.variableType === '20'">
                          <el-select
                            v-model="previewFormData[column.variable + scope.row.id]"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))
                            "
                            placeholder="请选择"
                            clearable
                            multiple
                          >
                            <el-option
                              v-for="item in column.classify"
                              :key="item.codeValue"
                              :label="item.codeDescribe"
                              :value="item.codeValue"
                            >
                            </el-option>
                          </el-select>
                        </div>
                        <div v-else-if="column.variableType === '30'">
                          <el-date-picker
                            v-model="previewFormData[column.variable + scope.row.id]"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))
                            "
                            type="date"
                            clearable
                            :value-format="column.entry"
                            placeholder="选择日期"
                          >
                          </el-date-picker>
                        </div>
                        <div v-else-if="column.variableType === '40'">
                          <el-time-picker
                            style="width: 90%"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))
                            "
                            v-model="previewFormData[column.variable + scope.row.id]"
                            placeholder="选择时间"
                            :format="accuracyList[scope.row.accuracy]"
                            :value-format="accuracyList[scope.row.accuracy]"
                          >
                          </el-time-picker>
                        </div>
                        <div v-else-if="column.variableType === '50'">
                          <el-date-picker
                            v-model="previewFormData[column.variable + scope.row.id]"
                            type="datetime"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))
                            "
                            placeholder="选择日期时间"
                          >
                          </el-date-picker>
                        </div>
                        <div v-else-if="column.variableType === '60'">
                          <el-input-number
                            v-model="previewFormData[column.variable + scope.row.id]"
                            :min="1"
                            :max="999"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))
                            "
                            clearable
                          ></el-input-number>
                        </div>
                        <div v-else-if="column.variableType === '70'">
                          <el-input
                            placeholder="请输入"
                            v-model="previewFormData[column.variable + scope.row.id]"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))
                            "
                          ></el-input>
                        </div>

                        <div v-else-if="column.variableType === '80'">
                          <el-input v-model="previewFormData[column.variable + scope.row.id]" :disabled="column.readOnly === '0' ||
                            (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))  || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))" style="width: 50%" clearable placeholder="请输入" maxlength="200" show-word-limit>
                          </el-input>
                          <el-dropdown placement="bottom-start" trigger="click">
                            <el-button :disabled="column.readOnly === '0' ||
                                         (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable])) || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))" 
                                       icon="el-icon-more" style="margin-left: 8px"></el-button>
                            <el-dropdown-menu slot="dropdown" >
                              <el-dropdown-item v-for="item in characterValueList" :key="item">
                                <span class="span-dropdown-item" @click="handleItemChecked(item.text, (column.variable + scope.row.id) + '', 'embedded')">{{ item.text }}</span>
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                        </div>

                        <div v-else-if="column.variableType === '90'">
                          <el-select
                            v-model="previewFormData[column.variable + scope.row.id + 'value1']"
                            :disabled="
                              fItem.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id + 'value1']))
                            "
                            placeholder="年"
                            style="width: 70px"
                            clearable
                            v-if="
                              column.variableTypeValue &&
                                column.variableTypeValue.accuracy &&
                                column.variableTypeValue.accuracy <= 3
                            "
                          >
                            <el-option v-for="item in yearsList" :key="item" :label="item" :value="item"> </el-option>
                          </el-select>
                          &nbsp;
                          <el-select
                            v-model="previewFormData[column.variable + scope.row.id +  'value2']"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id + 'value2']))
                            "
                            placeholder="月"
                            style="width: 70px"
                            clearable
                            v-if="
                              column.variableTypeValue &&
                                column.variableTypeValue.accuracy &&
                                column.variableTypeValue.accuracy <= 2
                            "
                          >
                            <el-option v-for="item in monthList" :key="item" :label="item" :value="item"> </el-option>
                          </el-select>
                          &nbsp;
                          <el-select
                            v-model="previewFormData[column.variable + scope.row.id +  'value3']"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id + 'value3']))
                            "
                            placeholder="日"
                            style="width: 70px"
                            clearable
                            v-if="
                              column.variableTypeValue &&
                                column.variableTypeValue.accuracy &&
                                column.variableTypeValue.accuracy <= 1
                            "
                          >
                            <el-option v-for="item in dayList" :key="item" :label="item" :value="item"> </el-option>
                          </el-select>
                        </div>

                        <div v-else-if="column.variableType === '100'">
                          <el-select
                            v-model="previewFormData[column.variable + scope.row.id + 'value1']"
                            :disabled="
                              fItem.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id + 'value1']))
                            "
                            placeholder="时"
                            style="width: 20%"
                            clearable
                            v-if="fItem.variableValue.accuracy <= 3"
                          >
                            <el-option v-for="item in hoursList" :key="item" :label="item" :value="item"> </el-option>
                          </el-select>
                          &nbsp;
                          <el-select
                            v-model="previewFormData[column.variable + scope.row.id + 'value2']"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id + 'value2']))
                            "
                            placeholder="分"
                            style="width: 20%"
                            clearable
                            v-if="column.accuracy <= 2"
                          >
                            <el-option v-for="item in minAndSecondList" :key="item" :label="item" :value="item">
                            </el-option>
                          </el-select>
                          &nbsp;
                          <el-select
                            v-model="previewFormData[column.variable + scope.row.id + 'value3']"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id + 'value3']))
                            "
                            placeholder="秒"
                            style="width: 20%"
                            clearable
                            v-if="column.variableValue.accuracy <= 1"
                          >
                            <el-option v-for="item in minAndSecondList" :key="item" :label="item" :value="item">
                            </el-option>
                          </el-select>
                        </div>
                        <div v-else-if="column.variableType === '110'">
                          <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入"
                            v-model="previewFormData[column.variable + scope.row.id]"
                            :disabled="
                              column.readOnly === '0' ||
                                (!fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(formData[fItem.controlVariable]))
                                || (!column.rowInlineControlcolumn && !!column.controlVariable && !column.controlValue.includes(previewFormData[column.controlVariable + scope.row.id]))
                            "
                          ></el-input>
                        </div>
                        <span v-else>{{ scope.row[encodeVariableType[column.originVariable]] }}</span>
                      </template>
                    </el-table-column>
                  </template>
                </el-table>
              </div>
            </el-form-item>
            <el-form-item :label="fItem.variableName" v-else-if="!fItem.embeddedSurface && fItem.variableName">
            </el-form-item>
          </template>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapActions } from 'vuex'
import {
  yearsList,
  monthList,
  dayList,
  characterValueList,
  hoursList,
  minAndSecondList,
} from '@/utils/enums/ecrf-design.js'

import { encodeVariableType } from '../data'
console.log('encodeVariableType', encodeVariableType)

export default {
  props: {
    formVisible: Boolean,
    previewVariableList: Array,
  },
  data() {
    return {
      rules: {},
      formData: {},
      embeddedList: [],
      formItemList: [],
      yearsList,
      monthList,
      dayList,
      imageUrl: '',
      characterValueList,
      minAndSecondList,
      hoursList,
      visibleList: [],
      accuracyList: {
        1: 'HH:mm:ss',
        2: 'HH:mm',
        3: 'HH',
      },
      previewFormData: {},
      numMaxType: {
        1: 9,
        2: 99,
        3: 999,
        4: 999,
      },
      encodeVariableType,
      precision: {},
      prev: {}
    }
  },

  watch: {
    formVisible(val) {
      if (val) {
        this.previewVariableList.forEach(item => {
          item.controlValue = []
          item.controlVariable = ''
          this.$set(this.formData, item.variable, '')
        })

        this.previewVariableList.map((fItem, fIndex) => {
          if (fItem.defaultValue) {
            this.formData[fItem.variable] = fItem.defaultValue
          }
          if (fItem.variableType === '20') {
            this.$set(this.formData, fItem.variable, [])
          }
          if (fItem.variableType === '60') {
            this.precision[fItem.variable] = fItem.variableValue.form.split('.')
          }
          if (fItem.embeddedSurface && !fItem.variableType) {
            fItem.headers = this.handleFormateHeaders(fItem)
            fItem.tableData = this.handleFormateTableData(fItem)
            fItem.headers.map((hItem, hIndex) => {
              if (hItem.defaultValue) {
                fItem.tableData.map((tItem, tIndex) => {
                  this.previewFormData[hItem.variable + tItem.id] = hItem.defaultValue
                })
              }
            })
          }
          this.rules[fItem.variable] = []
          if (fItem.regEx) {
            this.rules[fItem.variable].push({
              pattern: fItem.regEx,
              message: '正则校验未通过，请检查数据!',
              trigger: 'blur',
            })
          }
          if (fItem.required === '0') {
            this.rules[fItem.variable].push({ required: true, message: '请输入', trigger: 'blur' })
          }
          // 行控制--设置
          if (fItem.rowControl && fItem.rowControl.length > 0) {
            fItem.rowControl.map((rItem, rIndex) => {
              // console.log(111111, rItem[Object.keys(rItem)[0]], rItem[Object.keys(rItem)[0]].length)
              if (rItem[Object.keys(rItem)[0]] && rItem[Object.keys(rItem)[0]].length > 0) {
                // console.log('进来了', rItem[Object.keys(rItem)[0]])

                rItem[Object.keys(rItem)[0]].map(cItem => {
                  this.previewVariableList.map((pItem, pIndex) => {
                    if (pItem.variable === cItem || pItem.embeddedSurface === cItem) {
                      // pItem.controlValue = []
                      pItem.controlVariable = fItem.variable
                      pItem.controlValue.push(Object.keys(rItem)[0])
                    }
                  })
                })
              }
            })

          }
        })
        console.log('this.previewVariableList', this.previewVariableList)
      }
    },
    immediate: true,
  },

  methods: {
    ...mapActions('eCRFDesign', ['qryDesignList', 'addInterfaceDesign']),

    handleCheckboxChange(value) {
      console.log(8888888888888888888, value, this.previewVariableList, this.formData)
    },

    handleDisbaled(fItem) {
      let flag = false
      if (fItem.readOnly === '0') {
        flag = true
      }
      if (!Array.isArray(this.formData[fItem.controlVariable]) && !fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.includes(this.formData[fItem.controlVariable])) {
        flag = true
      } 

      if (Array.isArray(this.formData[fItem.controlVariable]) && !fItem.rowControl && !!fItem.controlVariable && !fItem.controlValue.some(item => this.formData[fItem.controlVariable].includes(item))) {
        flag = true
      } 
      return flag
    },

    // 单选重复选择取消选中
    handleRadioClick(e, key, canEdit) {
      if (!canEdit) {
        e === this.formData[key] ? (this.formData[key] = '') : (this.formData[key] = e)
        console.log('this.formData[key]', this.formData[key])
      }
    },

    // 关闭取消
    handleClose() {
      this.$emit('handlePreviewCancel')
    },

    // 允许修改时间
    handleDateTimeChange(value, field) {
      // this.formData[field] = value
      this.$set(this.formData, field, value)
      this.$set(this.formData, field + 'input', value)
    },

    // 内嵌表表头
    handleFormateHeaders(record) {
      const list =
        record.inlineBoundary && record.inlineBoundary.inlineBoundaries ? record.inlineBoundary.inlineBoundaries : []
      const headers = []
      const variableMappingList =
        record.inlineBoundary &&
        record.inlineBoundary.boundaryExtend &&
        record.inlineBoundary.boundaryExtend.variableMapping
          ? record.inlineBoundary.boundaryExtend.variableMapping.split(';/n')
          : []

      const variableMapping = []
      variableMappingList.map((vItem, vIndex) => {
        const temp = vItem.split('-')
        const obj = {
          originVariable: temp[0],
          MappingType: temp[1],
          targetValue: temp[2],
        }
        variableMapping.push(obj)
      })

      list.map((lItem, lIndex) => {
        lItem.controlValue = []
        lItem.controlVariable = ''
      })

      list.map((lItem, lIndex) => {
        console.log('内嵌表内行控制', lItem)
        // 行控制--设置
        if (lItem.rowInlineControl && lItem.rowInlineControl.length > 0) {
          lItem.rowInlineControl.map((rItem, rIndex) => {
            console.log(22222222, rItem[Object.keys(rItem)[0]], rItem[Object.keys(rItem)[0]].length)
            if (rItem[Object.keys(rItem)[0]] && rItem[Object.keys(rItem)[0]].length > 0) {
              console.log('内嵌表了777', rItem[Object.keys(rItem)[0]])
              rItem[Object.keys(rItem)[0]].map(cItem => {
                list.map((pItem, pIndex) => {
                  if (pItem.variable === cItem || pItem.embeddedSurface === cItem) {
                    // pItem.controlValue = []
                    pItem.controlVariable = lItem.variable
                    console.log('909090', pItem.variable, Object.keys(rItem)[0])
                    pItem.controlValue.push(Object.keys(rItem)[0])
                  }
                })
              })
            }
          })

        }

        let obj = {
          ...lItem,
          key: lItem.variable,
          name: lItem.variableName,
          classify: lItem.classify,
          variableValue: lItem.variableValue || {},
        }
        variableMapping.map((vItem, vIndex) => {
          if (lItem.variableName === vItem.targetValue) {
            obj = {
              ...obj,
              ...vItem,
              variableType: -1,
            }
          }
        })
        headers.push(obj)
      })

      console.log('headers', headers)
      return headers
    },

    // 内嵌表数据
    handleFormateTableData(record) {
      let list = []
      if (record.inlineBoundary && record.inlineBoundary.boundaryExtend) {
        if (record.inlineBoundary.boundaryExtend.type === '0' || record.inlineBoundary.boundaryExtend.type === '2') {
          list = record.inlineBoundary.inlineBoundaries ? [record.inlineBoundary.inlineBoundaries[0]] : []
        } else {
          list = record.inlineBoundary.boundaryExtend.classify ? record.inlineBoundary.boundaryExtend.classify : []
        }
      }
      console.log('list', list)
      return list
    },

    handleCheckboxClick(value, variable, index) {
      // console.log('value, variable, index', value, variable, index)
      this.previewVariableList.map(fItem => {
        if (fItem.variable === variable) {
          fItem.classify.map((cItem, cIndex) => {
            if (cIndex === index) {
              cItem.isCheck = value
            }
          })
        }
      })
    },

    handleItemChecked(text, field, type) {
      if (type === 'embedded') {
        this.previewFormData[field] = text
        console.log('this.previewFormData[field]', field, this.previewFormData[field])
      } else {
        this.formData[field] = text
      }
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    onBlur: function(val, variable) {
      if (this.formData[variable] && String(this.formData[variable]).endsWith('.')) {
        this.formData[variable] = Number(this.formData[variable])
      }
    },
    onInput: function(val, variable) {
      console.log('val, variable', val, variable)
      if (val) {
        let flag
        if (this.isNumeric(val)) {
          if (this.precision[variable]) {
            // eslint-disable-next-line no-useless-escape
            if (/[\.]/.test(val)) {
              const split = val.split('.')
              if (split[0].length > this.precision[variable][0]) {
                flag = true
              }
              if (split[1].length > this.precision[variable][1]) {
                flag = true
              }
            } else {
              if (String(val).length > this.precision[variable][0]) {
                flag = true
              }
            }
          }
        } else {
          flag = true
          this.prev[variable] = val
        }
        if (flag) {
          this.handleAnimation()
          this.formData[variable] = this.prev[variable]
        } else {
          this.prev = val
        }
      }
    },
    handleAnimation: function(variable) {
      this.timer && clearTimeout(this.timer)
      const el = document.querySelectorAll(
        `.${this.formData[variable]}-precision-box`
      )
      el.forEach(e => {
        e.classList.add('active')
      })
      this.timer = setTimeout(() => {
        el.forEach(e => {
          e.classList.remove('active')
        })
      }, 500)
    },
    isNumeric: function(str) {
      return /^[0-9]+([.][0-9]*)?$/.test(str)
    }
  },
}
</script>
<style lang="scss" scoped>
@import './add-interfacial.scss';
.avatar-uploader /deep/.el-upload {
  border: 1px dashed #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
.avatar {
  width: 140px;
  height: 140px;
  display: block;
}

/deep/ .el-form-item__label {
  padding-right: 10px;
}
/deep/ .el-radio {
  line-height: 2;
}
.input-date {
  /deep/ .el-input__inner {
    padding-left: 0px;
  }
}
.precision-box {
    position: relative;
    top: -20px;
    left: 85%;
    width: 2rem;
    height: 1rem;
    color: #666666;
    line-height: 1rem;
    transform: scale(0.45);
    -webkit-transform: scale(0.45);
  }
  .active {
    color: #f56c6c;
    animation: skew 0.5s;
  }
</style>
